<template>
	<view class="content-box">
		<view class="release-type-box">
			<up-form :model="formData" :rules="rules" ref="uFormRef" labelWidth="75px" labelPosition="left">
				<!-- 发布类型 -->
				<up-form-item label="发布类型 :" prop="name" @click="showType = true">
					<up-input v-model="formData.name" disabled disabledColor="#ffffff" placeholder="请选择发布类型"
						border="none"></up-input>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>

				<!-- 榜单名称 -->
				<up-form-item label="榜单名 :" v-if="formData.typeId == 3">
					<up-input v-model="formData.ranking" placeholder="请输入榜单名称"></up-input>
				</up-form-item>

				<!-- icon -->
				<up-form-item label="icon :" v-if="formData.typeId == 3">
					<up-upload :fileList="formData.imgList" @afterRead="afterRead('img')" @delete="deletePic('img')"
						name="3" multiple :previewFullImage="true"></up-upload>
				</up-form-item>

				<up-form-item label="标题 :" v-if="formData.typeId == 3 || formData.typeId == 5">
					<up-input v-model="formData.title" placeholder="请输入标题"></up-input>
				</up-form-item>

				<!-- 发布内容 -->
				<up-form-item label="内容 :"
					v-if="formData.typeId == 1 || formData.typeId == 2 || formData.typeId == 3 || formData.typeId == 5">
					<up-textarea v-model="formData.content" placeholder="请输入内容"></up-textarea>
				</up-form-item>

				<!-- 上传图片 -->
				<up-form-item label="图片 :" v-if="formData.typeId == 1 || formData.typeId == 5">
					<up-upload :fileList="formData.imgList" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:previewFullImage="true"></up-upload>
				</up-form-item>

				<!-- 上传视频 -->
				<up-form-item label="视频 :" v-if="formData.typeId == 2 || formData.typeId == 5">
					<up-upload :fileList="formData.videoSrc" name="2" multiple :maxCount="1" accept="video"></up-upload>
				</up-form-item>

				<!-- 上传banner -->
				<up-form-item label="广告图 :" v-if="formData.typeId == 4">
					<up-upload :fileList="formData.bannerSrc" @afterRead="afterRead('img')" @delete="deletePic('img')"
						name="3" multiple :previewFullImage="true"></up-upload>
				</up-form-item>

				<!-- 类型 -->
				<up-form-item label="类型 :" v-if="formData.typeId == 4">
					<up-input v-model="formData.type" placeholder="请输入类型"></up-input>
				</up-form-item>

				<!-- 地点 -->
				<up-form-item label="地点 :" v-if="formData.typeId == 4">
					<up-input v-model="formData.location" placeholder="请输入地点"></up-input>
				</up-form-item>

				<!-- 上传指南图 -->
				<up-form-item label="指南图 :" v-if="formData.typeId == 4">
					<up-upload :fileList="formData.gameGuideList" @afterRead="afterRead('img')"
						@delete="deletePic('img')" name="3" multiple :previewFullImage="true"></up-upload>
				</up-form-item>

				<!-- 上传汽车封面图 -->
				<up-form-item label="封面图 :" v-if="formData.typeId == 6">
					<up-upload :fileList="formData.carSrc" @afterRead="afterRead('img')" @delete="deletePic('img')"
						name="3" multiple :previewFullImage="true"></up-upload>
				</up-form-item>

				<!-- 汽车名称 -->
				<up-form-item label="名称 :" v-if="formData.typeId == 6">
					<up-input v-model="formData.carName" placeholder="请输入名称"></up-input>
				</up-form-item>

				<!-- 汽车级别 -->
				<up-form-item label="级别 :" v-if="formData.typeId == 6">
					<up-input v-model="formData.leve" placeholder="请输入级别"></up-input>
				</up-form-item>

				<!-- 指导价 -->
				<up-form-item label="指导价 :" v-if="formData.typeId == 6">
					<up-input v-model="formData.bottomPrice" placeholder="最低价指导价"></up-input>
					<text style="margin: 0 8rpx;"> - </text>
					<up-input v-model="formData.maximumPrice" placeholder="最高指导价"></up-input>
				</up-form-item>

				<!-- 描述 -->
				<up-form-item label="简介 :" v-if="formData.typeId == 6">
					<up-textarea v-model="formData.desc" placeholder="请输入简介内容"></up-textarea>
				</up-form-item>

				<!-- 发布 -->
				<up-form-item label="" v-if="formData.typeId">
					<up-button style="margin-top: 42rpx; width: 400rpx;" type="primary" text="发布"
						@click="onSubmit"></up-button>
				</up-form-item>

			</up-form>
		</view>

		<!-- 发布类型弹窗选择栏 -->
		<up-picker :show="showType" title="发布类型" :columns="typeList" keyName="name" @cancel="showType = false"
			@confirm="onConfirm"></up-picker>

		<!-- 消息通知 -->
		<up-notify ref="uNotifyRef" :style="{ height: '20px' }" />
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue';
	import { config } from '../../utils/config';
	import { addFunCircleApi } from '@/api/funCircleApi.js'

	// 底部弹窗状态
	const showType = ref(false)
	// 消息通知状态
	const uNotifyRef = ref(null);
	// 发布类型tab
	const typeList = reactive([
		[{ name: '趣事圈', typeId: 1 },
		{ name: '短视频', typeId: 2 },
		{ name: '新闻趣事', typeId: 3 },
		{ name: '文旅推荐', typeId: 4 },
		{ name: '搞笑', typeId: 5 },
		{ name: '汽车榜', typeId: 6 },]
	])

	// 数据
	const formData = ref({
		typeId: null, // tagId
		name: '', // tagName
		icon: '', // 榜单icon
		ranking: '', // 榜单名
		title: '', // 标题
		content: '', // 内容
		imgList: [], // 图片
		videoSrc: '../static/1.mp4', // 视频
		bannerSrc: [], //广告图
		type: '', // 景区类型
		location: '', // 景区位置
		gameGuideList: [], // 指南图
		carSrc: [], // 封面图
		carName: '', // 汽车名称
		leve: '', // 汽车级别
		bottomPrice: '', // 最低价
		maximumPrice: '', // 最高价
		desc: '', // 简介
	})

	// 使用 ref 创建响应式引用
	const uFormRef = ref(null);
	// 从缓存获取用户数据
	const userInfo = ref(null)

	// 验证规则
	const rules = {
		name: [
			{
				required: true,
				message: '请选择发布类型',
				trigger: ['blur', 'change'],
			}
		],
	}
	
	onMounted(() => {
		// 获取缓存的登录信息
		userInfo.value = uni.getStorageSync('userInfo') == ''? null : uni.getStorageSync('userInfo')
	})

	// 定义方法  
	const onConfirm = (e) => {
		formData.value.typeId = e.value[0].typeId
		formData.value.name = e.value[0].name
		showType.value = false
		if (uFormRef.value) {
			uFormRef.value.validateField('name');
		}
	}

	// 上传
	// 删除图片
	const deletePic = (event) => {
		formData.value.imgList.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = formData.value.imgList.length;
		lists.map((item) => {
			formData.value.imgList.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item : any = formData.value.imgList[fileListLen];
			formData.value.imgList.splice(fileListLen, 1, {
				url: result,
			});
			fileListLen++;
		}
	};

	// 上传
	const uploadFilePromise = async (url) => {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: config.URL_UPLOAD, // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {},
				success: (res : any) => {
					let { results } = JSON.parse(res.data)
					setTimeout(() => {
						resolve(results);
					}, 1000);
				},
			});
		});
	};

	// 提交
	const onSubmit = async () => {
		if (formData.value.typeId == 1) {
			await saveFunCircleData()
		}
	}

	// 趣事圈提交
	const saveFunCircleData = async () => {
		if (!formData.value.content && !formData.value.imgList.length) {
			uNotifyRef.value.show({
				top: -1,
				message: '请输入内容或上传图片',
				type: 'error',
			});
		} else {
			const { code } = await addFunCircleApi({
				content: formData.value.content,
				images: formData.value.imgList.map(item => item.url).join(','),
				currentUserId: userInfo.value.id
			})
			if (code == 200) {
				successTips()
				formData.value.content = ''
				formData.value.imgList = []
			} else {
				errtips()
			}
		}
	}

	// 成功提示
	const successTips = () => {
		uNotifyRef.value.show({
			top: -1,
			message: '发布成功',
			type: 'success',
		});
	}

	// 异常提示
	const errtips = () => {
		uNotifyRef.value.show({
			top: -1,
			message: '接口异常',
			type: 'error',
		});
	}
	
</script>

<style lang="scss" scoped>
	.content-box {
		height: 100%;
		overflow: auto;
		padding: 24rpx;
		box-sizing: border-box;

	}

	::v-deep .u-form-item__body__left {
		align-items: start !important;
		font-weight: 700;
	}
</style>